Creating a dynamic tree in flex

Tree control is one of the most powerful control in Flex. You must have stumbled upon N number of articles explaining the tree control, where they pick up the data from an XML for the tree, but that does not really happen too often if you have a tree which is to be built dynamically as loading a new XML everytime to build a tree is a costly affair.

So, let’s create a tree in Flex using actionscript objects which may be serialized version of server side objects or you may want to create a tree using some business logic rather than some plain input text. So, we will create a TreeNode class in Actionscript which will represent each and every node in the tree. The advantage of working with node objects is that you can have different types of objects at different levels and also use the inheritance concept pretty nicely. So a basic node may be a Node with variables – id, name, type.  A subclass of this node may be a PersonNode with additional variables – age, sex etc… and you can go on like this creating trees with the apt information and you can display any kind of data just by clicking on the node by fetching that node from the tree.

The top level class will be TreeNode.

public class TreeNode {

     public var id : int;

     public var name : String;

     public var type : int;

     public var children : ArrayCollection;

     public function addChild(node : TreeNode) : void {

      if (this.children == null)

          this.children = new ArrayCollection();

          children.addItem(node);

     }
//Similarly you could have getNode();

}

A sublcass of this could be a DataTreeNode

public class DataTreeNode extends TreeNode {

     public var data : Object;    

}

Now you can simply create a tree in Flex, by creating a RootNode of type DataTreeNode.

var rootNode : DataTreeNode = new DataTreeNode();

rootNode.id = 0;

rootNode.name = “Root”;

rootNode.type = -1;

Now you can keep creating nodes of different types and keep adding to the rootNode. Just assign the rootNode to you tree as a dataProvider and there you are, the flex tree will display automatically. I have found this approach much better and easy as it allows easy extension and also allows me to do much more on when i click a treeNode. Also, this way you don’t solely rely on the Tree api in Flex to do something with your tree, you can manipulate or swift your tree in any manner you want and reap the benefits.

If you have better way of creating dynamic tree in flex do comment, i would be more than pleased to improve or use that for my project, with all the regard definitely :-).